<template>
  <div>
    <el-card class="w_100" v-loading="spinning">
      <template #header>
        <header>
          <div class="left">合格证开具数量</div>
          <div class="right">
            <!--            TODO 权限-->
            <el-select v-model="queryParam.unitId" clearable size="mini" style="width: 150px;margin-left:10px;"
                       @change='unitIdClick' placeholder="请选择区域"
                       v-hasPermi="['nongjt:user:list']" >
              <el-option v-for="{id,area} of unitList" :key="id" :label="area" :value="id">
              </el-option>
            </el-select>
            <el-select v-model="queryParam.year" size="mini" style="width: 80px;margin-left: 10px;"
                       @change='yearSelect'
                       placeholder="请选择年份">
              <el-option v-for="temp of yearList" :key="temp" :label="temp" :value="temp">
              </el-option>
            </el-select>
          </div>
        </header>
      </template>

      <div id='MonthCountCharts' v-show='isShowChart' style='width: 100%;height: 300px;'></div>
      <div v-if='!isShowChart' style='line-height: 300px;font-size: 24px;text-align: center'>
        该条件下无统计数据
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import dayjs from "dayjs";
import {getAction, getActionSimple} from "@/utils/axiosUtils";
import {echartResizeMixins} from "@/views/nongjt/charts/echartResizeMixins";
let echarts = require('echarts')

export default {
  name: 'MonthCountCharts',
  mixins:[echartResizeMixins],
  data() {
    return {
      url: {
        printCount: '/nongjt/certificate_count/getPrintCountList',
        exportXlsUrl: '/nongjt/certificate_count/exportXlsPrintCount'
      },
      spinning: false,
      isShowChart: true,
      queryParam: {
        unitId: 1,
        year: null
      },
      chart: null,
      //图标标题
      title: '合格证开具数量',
    }
  },
  created(){
    setTimeout(() => {
      this.initChart();
    }, 500);
  },
  computed:{
    ...mapGetters([
      'unitList',
      'selectUnitId',
      'yearList'
    ]),
  },
  methods:{
    //初始化图表
    async initChart() {
      const result = await getActionSimple(this.url.printCount, this.queryParam)
      const dom = document.querySelector('#MonthCountCharts')
      this.chart = echarts.init(dom)
      this.option = {
        xAxis: {
          type: 'category',
          data: result.months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: result.counts,
            type: 'bar'
          }
        ]
      };
      this.chart.setOption(this.option)
    },
    //年份选择事件
    yearSelect() {
      this.initChart();
    },
    //导出
    async handleExportXlsMy() {
      this.spinning = true
      try {
        this.download(this.url.exportXlsUrl, {
          ...this.queryParam
        }, `${this.queryParam.year}年合格证开具数量统计.xlsx`)
      } finally {
        this.spinning = false
      }
    },
    //区域选择事件
    unitIdClick() {
      this.initChart()
    }
  },
  watch: {
    //通过观察yearList变化给查询条件赋值
    yearList(n) {
      if (n && n.length>0) {
        try {
          this.queryParam.year = n[0]
        } catch (e) {
          console.log(e)
        }
      }
    },
    selectUnitId(n){
      this.queryParam.unitId = +n
    }
  }
}
</script>
<style lang="scss" scoped>
.w_100{
  width: 100%;
}
header{
  display: flex;
  justify-content: space-between;
  align-content: center;

  .left{
    font-weight: bold;
  }
}
</style>
